import { useState, useEffect } from 'react'
import { Card, Table, Switch, Rate, Avatar } from 'antd'
import { AntDesignOutlined } from '@ant-design/icons'
import { getCommentList } from '@/api/comment'
function comment() {
  const [list, setList] = useState([])
  useEffect(() => {
    getList()
  }, [])
  const getList = () => {
    getCommentList(1).then(res => {
      console.log(res)
      if (res.status === 200) {
        setList(res.data.list)
      }
    })
  }
  // 表格数据
  const columns: any = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '商品',
      dataIndex: 'age',
      key: 'age',
      render: (_: any, record: any) => (
        <div>
          <img src={record.goods_item.cover} alt='' width={50} height={50} />
          <p>{record.goods_item.title}</p>
        </div>
      )
    },
    {
      title: '评价信息',
      dataIndex: 'address',
      key: 'address',
      render: (_: any, record: any) => (
        <div>
          <span>用户：{record.user.nickname}</span>
          <br />
          <Rate disabled defaultValue={record.rating} />
        </div>
      )
    },
    {
      title: '评论时间',
      dataIndex: 'create_time',
      key: 'x'
    },
    {
      title: '状态',
      dataIndex: '',
      key: 'x',
      render: (_: any, record: any) => <Switch checked={record.status} />
    }
  ]

  return (
    <>
      <Card>
        <Table
          columns={columns}
          expandable={{
            expandRowByClick: true,
            expandedRowRender: (row: any) => (
              <div style={{ display: 'flex', alignItems: 'normal' }}>
                <Avatar icon={<AntDesignOutlined />} src={row.user.avatar} />
                <div style={{ marginLeft: '10px' }}>
                  <p style={{ margin: 0 }}>{row.user.username}</p>
                  <p style={{ margin: 0 }}>{row.review.data}</p>
                  {row.review.image.map((item: string) => {
                    return (
                      <>
                        <img src={item} alt='' key={item} height={200} />
                      </>
                    )
                  })}
                </div>
              </div>
            ),
            rowExpandable: record => record.name !== 'Not Expandable'
          }}
          dataSource={list}
        />
      </Card>
    </>
  )
}
export default comment
